<template>
  <div id="main_div">
    <el-row :gutter="0">


      <el-col :span="12">
        <el-card style=" border-radius:0px;background:rgba(117,173,247,0.8) ;float: right; width: 600px;height: 700px;margin: 80px auto">
          <div style="color: white">
            <h1>达内天大中心09小组</h1>
            <h3>项目成员:</h3>
            <h6>2023年12月18日启动项目</h6>
          </div>
        </el-card>
      </el-col>


      <el-col :span="12">
        <el-card style="border-radius:0; float:left; width:600px; height:700px; margin:80px  auto">
          <h1 style="color: #5353fa;margin-left: -230px; margin-top: 30px">欢迎登录</h1>
          <el-form label-width="100px" style="margin-top: 30px; margin-right: 80px">
            <el-form-item label="账号">
              <el-input v-model="user.telephoneNumber" placeholder="请输入注册时填写的手机号"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="user.password" type="password " placeholder="请输入密码"></el-input>
            </el-form-item>

            <el-form-item style="color: blue; float: right; margin-top: -20px">
              <span>忘记密码？</span>
            </el-form-item>

            <br>

            <el-form-item>
              <el-button @click="login()" type="primary" style="border-radius: 0;background-color: #5353fa;width: 100%;height: 50px;">登录</el-button>
            </el-form-item>

            <router-link to="/reg" style=" text-decoration:none;font-size: 15px;color: #5353fa;margin-left: -50px">没有账号，现在去注册！</router-link>
          </el-form>
        </el-card>
      </el-col>


    </el-row>
  </div>

</template>

<script setup>
import {ref} from "vue";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";
import axios from "axios";



const user = ref({telephoneNumber:'',password:''});



const login = ()=>{
  let data = qs.stringify(user.value);
  axios.post('http://localhost:8080/v1/users/login',data)
      .then((Response)=>{
        if(Response.data.code==2001){
          ElMessage.success("登录成功");
          let user = Response.data.data;
          localStorage.setItem('user',JSON.stringify(user));
          router.push('/home')
          // location.href='/home';
        }else {
          ElMessage.error(Response.data.msg);
        }
      })
}






</script>

<style scoped>
#main_div{
  overflow: hidden;
  height: 720px;
  background-image: url("/public/imgs/beijing.png");
  background-size: cover;/*设置封面尺寸*/
  background-position: center;/*设置背景图片居中*/
}
</style>
